<template>
  <div id="app">
    <router-view/>
    <div class="tabbar">
      <ul>

          <router-link to="/home" active-class="active" tag="li" >
            <span class="iconfont icon-tubiao- " ></span>
            <span>首页</span>
          </router-link>

          <router-link to="/stylist" active-class="active"  tag="li">
          <span class="iconfont icon-jiandao"></span>
          <span>设计师</span>
          </router-link>

        <router-link to="/shoppingcart" active-class="active"  tag="li">
          <span class="iconfont icon-gouwuche1"></span>
          <span>购物车</span>
        </router-link>
        <router-link to="/my" active-class="active"  tag="li">
          <span class="iconfont icon-huangguan"></span>
          <span>我的</span>
        </router-link>
      </ul>

    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      isActive: true
    }
  }
}
</script>

<style lang="less" rel="stylesheet/less">
  @import "../lib/css/common.css";
  @import url("../font/iconfont.css");
  @import "../lib/less/normalize";
  @import "../lib/less/variable";
  body,html{
    color: #666;
    background: #F4F4F4;
  }
  .tabbar {
    width: 100%;
    .h(40);

    .fs(14);
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    border-top:1px solid #ccc;
    ul {
      display: flex;
      li {
        flex: 1;
        span{
          .lh(20);
          display:block;
          width: 100%;

        }
        span:first-child{
          position: relative;
          .top(3);
          .fs(20);
        }
        span:last-child{
          vertical-align: bottom;
        }

      }
      .active{
        color: #0F7ADA;
        span:first-child{
          font-weight: bold;
        };
      }

    }
  }
</style>
